<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extra/spring-security">
<head>
    <meta charset="UTF-8">
    <title>三线表生成</title>
    <link href="https://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet">
    <style>
        .custom-form-control {
            border-radius: 8px;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
        }
        .custom-form-label {
            font-weight: bold;
        }
        .loading-indicator {
            display: none;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <h2 class="text-center mb-4">表结构生成器</h2>
            <form id="dbForm">
                <div class="form-group">
                    <label for="dbUrl" class="custom-form-label">主机:</label>
                    <input type="text" class="form-control custom-form-control" id="dbUrl" name="dbUrl" value="127.0.0.1" placeholder="如：127.0.0.1" required>
                </div>
                <div class="form-group">
                    <label for="port" class="custom-form-label">端口:</label>
                    <input type="text" class="form-control custom-form-control" id="port" name="port" value="3306" placeholder="如：3306" required>
                </div>
                <div class="form-group">
                    <label for="dbName" class="custom-form-label">数据库:</label>
                    <input type="text" class="form-control custom-form-control" id="dbName" name="dbName" value="test_db" placeholder="如：test_db" required>
                </div>
                <div class="form-group">
                    <label for="username" class="custom-form-label">用户名:</label>
                    <input type="text" class="form-control custom-form-control" id="username" name="username" value="root" placeholder="如：root" required>
                </div>
                <div class="form-group">
                    <label for="password" class="custom-form-label">密码:</label>
                    <input type="password" class="form-control custom-form-control" id="password" name="password" placeholder="请输入密码" required>
                </div>
                <button type="submit" class="btn btn-primary btn-block mt-4">连接</button>
                <div class="loading-indicator">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <p class="mt-2">正在生成表结构...</p>
                </div>
            </form>
            <div class="card mt-4" style="min-height: 200px; border-radius: 15px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);">
                <div class="card-body">
                    <p class="text-center">数据表信息将显示在这里...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery-3.1.0.min.js}"></script>
<script>
    $(document).ready(function () {
        var $loadingIndicator = $('.loading-indicator');
        $('form#dbForm').on('submit', function (e) {
            e.preventDefault();
            $loadingIndicator.show();

            var dbUrl = $('#dbUrl').val();
            var dbName = $('#dbName').val();
            var username = $('#username').val();
            var password = $('#password').val();

            $.ajax({
                url: '/table/generateAll',
                type: 'POST',
                data: {
                    dbUrl: dbUrl,
                    dbName: dbName,
                    username: username,
                    password: password
                },
                success: function (response) {
                    $loadingIndicator.hide();
                    alert('生成结束！');
                    // 更新数据表信息的逻辑
                },
                error: function (xhr, status, error) {
                    $loadingIndicator.hide();
                    alert('生成失败：' + (xhr.responseText || error));
                }
            });
        });
    });
</script>
</body>
</html>